/* 
  学习目标：修改组件库的主题色
    1. 全局修改
    2. 局部修改

    使用场景：
      产品或UI明确告诉你，主题色是#xxx - 全局修改
      局部颜色与antd默认颜色不一致 - 局部修改的方式
*/
@import './hairline.scss';
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html body {
  color: #333;
  font-size: 16px;
  font-family: PingFangSC;
  background-color: #fff;
}

html,
body,
#root {
  height: 100%;
}

body,
h1,
h3,
p {
  margin: 0;
  padding: 0;
}

button {
  display: block;
  outline: 0 none;
  padding: 0;
  border-radius: 8px;
  -webkit-appearance: none;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
  color: #000;
  background-color: #fff;
  outline: none;
  border: 0;
}

input {
  display: block;
  margin: 0;
  padding: 0;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
  color: #333;
  &:focus-visible {
    outline: none;
  }
}

textarea {
  line-height: 6.8vw;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  overflow: visible;
  display: block;
  resize: none;
  word-break: break-word;
  word-wrap: break-word;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.testBox {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 1px solid #ccc;
}

.testBox_hairline {
  width: 100px;
  height: 100px;
  background-color: pink;

  // 2. 在需要1px边框的类名身上，加上hairline
  @include hairline('all', #f00);
}

// 1. 全局修改主题变量
:root:root {
  --adm-color-primary: #fc6627;
}

// 2. 局部修改主题变量
.geek-color {
  --adm-color-primary: #fc6627;
}

.adm-default-color {
  --adm-color-primary: #1677ff;
}
